<template>
  <div class="login-box">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <h3 class="login-title">欢迎登录</h3>
      <el-form-item label="用户名" prop="name">
        <el-input v-model="form.name" placeholder="请输入用户名"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit(form)">登录</el-button>
      </el-form-item>

    </el-form>
  </div>
</template>

<script>
export default {
  name: 'login',
  data () {
    return {
      form: { 
        name: 'zhangsan',
        password:'1234',
      },
      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 6, message: '长度在 3 到 6 个字符', trigger: 'blur' }
        ],

      }
    }

  },
  methods: {
    onSubmit :function (formName) {
      alert(formName.name+"   "+formName.password);
      //this.$router.push("/main");
      this.$router.push({
        "path":"/main",
        query:formName,  
      })
    }

    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .login-title{
    text-align: center;
    margin: 30px auto;
  }
  .login-box{
    width: 400px;
    height: 300px;
    border: 1px solid #DCDFE6;
    margin: 50px auto;
    padding-right: 40px;
    border-radius: 8px;
    box-shadow: 0px 8px 16px silver;
  }
</style>
